<script setup lang="ts">
import { validateURL } from '@/utils/validate'

const route = useRoute()

const state = reactive({
  title: '', // 外链标题
  link: '', // 目标跳转的url
})

// 当前项目域名
const hostname = window.location.hostname

// 监听路由变化
watch(() => route.path, () => {
  state.title = route.meta?.title || '外链'
  state.link = route.meta?.linkTo || ''
}, {
  immediate: true, // 立即执行
})

// 点击继续访问
function handleOpenPage() {
  const { origin } = window.location;
  // console.log('点击继续访问', window.location);
  if (validateURL(state.link)) window.open(state.link);
  else window.open(`${origin}${state.link}`);
}
</script>

<template>
  <div class="link-container flex-column-center">
    <img class="link-img" src="@/assets/icons/link.svg" alt="官网链接">
    <div class="link-wrap">
      <h3>即将跳转</h3>
      <div>你访问的网站不存在 {{ hostname }},注意安全</div>
      <div>{{ state.link }}</div>
      <el-button class="link-btn" @click="handleOpenPage" round>继续前往访问</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.link-container {
  border-radius: 10px;
  overflow: hidden;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .link-img {
    width: 200px;
  }

  .link-wrap {
    width: 600px;
    border: 1px solid var(--hs-border-color-light);
    border-radius: 15px;
    padding: 20px;
    line-height: 30px;
    font-size: 15px;
    margin-top: 20px;

    .link-btn {
      float: right;
      border-radius: 20px;
    }
  }

}
</style>